<template>
  <div class="dashboard-container" ref="scrollContainer" @scroll="handleScroll">
    <div class="charts-content">
      <div class="charts-item">
        <div ref="chartRef"></div>
      </div>
      <div class="charts-item">
        <div ref="chartRef1"></div>
      </div>
      <div class="charts-item">
        <div ref="chartRef2"></div>
      </div>
    </div>
    <div class="input-content" :class="{'sticky':isSticky}">
      <el-input style="width: 300px" suffix-icon="el-icon-search" v-model.trim="query.userName" clearable placeholder="姓名/昵称" @keyup.enter.native="search"/>
      <el-button type="primary" size="small" @click="serach" style="border-color: #ff47ab; background-color: #ff47ab; color: #fff">查询</el-button>
    </div>
    <div class="list-content" ref="listContent">
      <div class="wrap-list align-center">
        <div
          class="wrap-list-item"
          v-for="item in userInfoList"
          :key="item.userId"
          @click="handleDetail(item.userId)"
        >
          <div class="wrap-list-item-info">
            <div class="wrap-list-item-info-t align-center">
              <img
                :src="item.headPicture"
                style="width: 60px; height: 60px; border-radius: 6px"
              />
              <div class="wrap-list-item-info-t-r">
                <div class="user-name">{{ item.wxName }}</div>
                <div class="user-real-name">{{ item.realName }}</div>
              </div>
            </div>
            <div class="wrap-list-item-info-tips align-center">
              <div
                class="wrap-list-item-info-tips-item align-justify-center"
                v-show="item.isHouseMark"
              >
                <div class="wrap-list-item-info-tips-item-sure"></div>
                实名
              </div>
              <div
                class="wrap-list-item-info-tips-item align-justify-center bgF8A366"
                v-show="item.isEducationalMark"
              >
                <div class="wrap-list-item-info-tips-item-sure"></div>
                学历
              </div>
              <div
                class="wrap-list-item-info-tips-item align-justify-center bg60DCEA"
                v-show="item.isHouseMark"
              >
                <div class="wrap-list-item-info-tips-item-sure"></div>
                房子
              </div>
              <div
                class="wrap-list-item-info-tips-item align-justify-center bg7BADEF"
                v-show="item.isCarMark"
              >
                <div class="wrap-list-item-info-tips-item-sure"></div>
                车子
              </div>
            </div>
            <div
              class="wrap-list-item-info-b wrap-list-item-info-tips align-center"
            >
              <div class="wrap-list-item-info-tips-item">
                {{ item.addressDistrictName }}
              </div>
              <div class="wrap-list-item-info-tips-item">
                {{ item.birthday }}年
              </div>
              <div class="wrap-list-item-info-tips-item">
                {{ item.workName }}
              </div>
              <div class="wrap-list-item-info-tips-item">
                {{ item.height }}cm
              </div>
            </div>
          </div>
          <div
            class="wrap-list-item-mark align-justify-center"
            v-show="item.isSee"
          >
            已见面
          </div>
        </div>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNumber"
      :limit.sync="query.pageSize"
      @pagination="getInfo"
    />
  </div>
</template>



<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { totalList, commonConstants } from "@/api/user";
import { getFormData } from "@/utils";

export default {
  name: "Dashboard",
  components: { Pagination },
  data() {
    return {
      chartInstance: null, // 存储图表实例，方便后续销毁
      chartInstance1: null, // 存储图表实例，方便后续销毁
      chartInstance2: null, // 存储图表实例，方便后续销毁
      query: {
        pageNumber: 1,
        pageSize: 6,
      },
      total: 1,
      userInfoList: [],
      isSticky:false
    };
  },

  computed: {
    ...mapGetters(["roles", "commonData"]),
  },

  mounted() {
    if(!this.commonData || !Object.keys(this.commonData).length) this.getCommonConstants();
    this.getInfo();
    this.chartInstance = echarts.init(this.$refs.chartRef);
    this.chartInstance1 = echarts.init(this.$refs.chartRef1);
    this.chartInstance2 = echarts.init(this.$refs.chartRef2);
    const colors = ["#53CBFF", "#FFA4FD"];
    const option = {
      title: {
        text: "近一月每周注册人数",

        left: "left",
      },

      tooltip: {
        trigger: "axis",
      },

      legend: {
        data: ["男", "女"],

        top: "10%",
      },

      xAxis: [
        {
          type: "category",

          // prettier-ignore

          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
      ],

      yAxis: [
        {
          type: "value",

          name: "人",

          alignTicks: true,

          axisLine: {
            show: true,

            lineStyle: {
              // color: "#E6E6E6",
            },
          },
        },
      ],

      series: [
        {
          name: "男",

          type: "bar",

          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],

          color: colors[0],
        },

        {
          name: "女",

          type: "bar",

          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],

          color: colors[1],
        },
      ],
    };
    const option1 = {
      title: {
        text: "近一月每周见面人数",

        left: "left",
      },

      tooltip: {
        trigger: "axis",
      },

      legend: {
        data: ["男", "女"],

        top: "10%",
      },

      xAxis: {
        type: "category",

        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      },

      yAxis: {
        type: "value",
      },

      series: [
        {
          name: "男",

          type: "line",

          data: [120, 132, 101, 134, 90, 230, 210],

          color: colors[0],
        },

        {
          name: "女",

          type: "line",

          data: [220, 182, 191, 234, 290, 330, 310],

          color: colors[1],
        },
      ],
    };
    const option2 = {
      title: {
        text: "近一月每周添加收藏人数",

        left: "left",
      },

      tooltip: {
        trigger: "axis",
      },

      legend: {
        data: ["男", "女"],

        top: "10%",
      },

      xAxis: [
        {
          type: "category",

          // prettier-ignore

          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
      ],

      yAxis: [
        {
          type: "value",

          name: "人",

          alignTicks: true,

          axisLine: {
            show: true,

            lineStyle: {
              // color: "#E6E6E6",
            },
          },
        },
      ],

      series: [
        {
          name: "男",

          type: "bar",

          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],

          color: colors[0],
        },

        {
          name: "女",

          type: "bar",

          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],

          color: colors[1],
        },
      ],
    };
    // 3. 设置配置项，渲染图表
    this.chartInstance.setOption(option);
    this.chartInstance1.setOption(option1);
    this.chartInstance2.setOption(option2);
    // 监听窗口大小变化，自动调整图表（可选）
    window.addEventListener("resize", this.handleResize);
  },

  methods: {
    handleScroll(e) {
      this.isSticky = e.target.scrollTop >= this.$refs.listContent.offsetTop
    },
    async getCommonConstants() {
      const data = await commonConstants();
      this.$store.dispatch("user/setCommonConstants", data);
    },
    handleDetail(userId) {
      this.$router.push({
        path: "/userdetail",
        query: { userId },
      });
    },
    async getInfo() {
      const { records, totalPage } = await totalList(getFormData(this.query));
      this.userInfoList = records;
      this.total = totalPage;
    },
    serach() {
      this.$router.push({
        path: "/datalist",
        query: { userName: this.query.userName },
      });
    },
    handleResize() {
      this.chartInstance?.resize();
      this.chartInstance1?.resize();
      this.chartInstance2?.resize();
    },
  },

  beforeDestroy() {
    // 销毁图表实例，释放内存（必须！避免内存泄漏）
    if (this.chartInstance) {
      this.chartInstance.dispose();
      this.chartInstance = null;
    }
    if (this.chartInstance1) {
      this.chartInstance1.dispose();
      this.chartInstance1 = null;
    }
    if (this.chartInstance2) {
      this.chartInstance2.dispose();
      this.chartInstance2 = null;
    }
    // 移除事件监听
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  overflow: auto;
  height: calc(100vh - 84px);

  .charts-content {
    display: flex;
    justify-content: space-between;
    .charts-item {
      width: 513px;
      height: 300px;
      padding: 20px;
      box-sizing: border-box;
      background-color: #fff;
      & > div {
        width: 100%;
        height: 100%;
      }
    }
  }

  .input-content {
    z-index: 99;
    margin: 30px 0;
    &.sticky {
      position: sticky;
      top: 0;
      padding-bottom: 30px;
      box-sizing: border-box;
      background-color: #eaecf0;
    }
  }

  .list-content {
    margin-top: 30px;
    .wrap-list {
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      &-item {
        position: relative;
        width: 360px;
        height: 176px;
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 20px;
        box-sizing: border-box;
        background-color: #ffffff;
        border-radius: 12px 12px 12px 12px;
        cursor: pointer;
        &.marginRight {
          margin-right: 0;
        }

        &-info {
          &-t {
            &-r {
              margin-left: 14px;
              .user-name {
                margin-bottom: 14px;
                font-weight: 500;
                font-size: 14px;
                color: #777777;
              }

              .user-real-name {
                font-weight: bold;
                font-size: 16px;
                color: #222222;
              }
            }
          }

          &-tips {
            margin-top: 16px;
            &-item {
              width: 50px;
              height: 20px;
              margin-right: 10px;
              background-color: #57ee91;
              font-size: 12px;
              color: #ffffff;
              border-radius: 2px;
              &.bgF8A366 {
                background-color: #f8a366;
              }

              &.bg60DCEA {
                background-color: #60dcea;
              }

              &.bg7BADEF {
                background-color: #7badef;
              }

              &-sure {
                width: 12px;
                height: 12px;
                margin-right: 2px;
                background: url("../..//images/sure.png") center/cover no-repeat;
              }
            }
          }

          &-b {
            .wrap-list-item-info-tips-item {
              width: auto;
              height: auto;
              padding: 6px 10px;
              box-sizing: border-box;
              color: #444444;
              font-size: 12px;
              background-color: #f3f3f3;
            }
          }
        }

        &-mark {
          position: absolute;
          right: 0;
          top: 0;
          width: 56px;
          height: 20px;
          background: url("../../images/jianmian-tips.png") center/cover
            no-repeat;
          font-size: 12px;
          color: #fff;
        }
      }
    }
  }
}
</style>